<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-else-if</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        分数：{{score}}
        <button @click="add">加法</button>

        <hr>
        <button @click="getNum">随机一个数</button>
        <div :class="cname">{{num}} {{num >= 60?"及格":"不及格"}}</div>
        <div v-bind:class="cname"> 分数：{{num}}</div>
        <div v-if="num < 60">不及格</div>
        <div v-else-if="num < 70">及格</div>
        <div v-else-if="num < 80">良好</div>
        <div v-else>优秀</div>
    </div>
</body>
<script>

    new Vue({
        el: "#app",
        data: {
            score: Math.round(Math.random() * 100),
            num: "",
            cname: "bill",
        },
        methods: {

            add() {
                this.score++;
            },

            getNum() {
                this.num = Math.round(Math.random() * 100);
            }

        },
    })







</script>

</html>